<template>
  <div class="right-container bg-color-white">
    <h5 class="order-title">订单详情</h5>
    <div class="line-style"></div>
    <div>
      <h5 class="order-info-title">订单信息</h5>
      <div style="padding: 0 50px;">
        <el-table :data="data.orderTableData" border style="width: 100%" :header-cell-style="headerStyle" :cell-style="cellStyle">
          <el-table-column prop="orderCode" label="订单号" width="384" align="center"/>
          <el-table-column prop="orderCreateTime" label="下单时间" width="240" align="center"/>
          <el-table-column label="支付状态" width="288" align="center">
            <template #default="scope">
              <span>{{Constant.orderStatusMap[scope.row.orderStatus]}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div>
      <h5 class="order-info-title">课程信息</h5>
      <div style="margin: 0 50px;">
        <el-table :data="data.orderTableData" border style="width: 100%" :header-cell-style="headerStyle" :cell-style="cellStyle">
          <el-table-column label="商品详情" width="532" align="center">
            <template #default="scope">
              <span v-for="(unit,index) in scope.row.orderItemList" class="flex-column flex-top" style="padding: 10px 30px" :style="index < scope.row.orderItemList.length - 1?{borderBottom: '1px solid #efeff0'} : ''">
                <span class="course-type-content">{{unit.goodCategoryName}}</span>
                <span class="course-name-content">{{unit.goodsName + '-' + unit.goodsSkuName}}</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="orderTotalPrice" label="订单总价" width="135" align="center">
            <template #default="scope">
              <span>{{'￥' + scope.row.orderTotalPrice}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="orderPayPrice" label="实际支付" min-width="140" align="center">
            <template #default="scope">
              <span>{{'￥' + scope.row.orderPayPrice}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="flex-column flex-top">
      <h5 class="order-info-title">结算信息</h5>
      <div class="flex-start-center" style="padding-left: 50px;">
        <div class="flex-column flex-end price-label-container">
          <span>订单总金额:</span>
          <span>应付金额:</span>
          <span>已付金额:</span>
        </div>
        <div class="flex-column flex-top price-value-container">
          <span>{{'¥ ' + orderInfo.orderTotalPrice}}</span>
          <span>{{'¥ ' + orderInfo.orderTotalPrice}}</span>
          <span>{{'¥ ' + orderInfo.orderPayPrice}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {defineProps, onMounted, reactive} from 'vue';
import {useRoute, useRouter} from 'vue-router';
import {Constant} from '../../../api/const.js'

const router = useRouter();
const route = useRoute();
const props = defineProps({
  orderInfo: {
    type: Object,
    default: {}
  }
});
const data = reactive({
  orderTableData: [],
  orderInfo: {
    "orderCode": "",
    "orderId": '',
    "orderPayTime": "",
    "orderStatus": "",
    "orderTotalPrice": '',
    "orderPayPrice": '',
  },
  orderItemList: [],
});
const headerStyle = () => ({
  backgroundColor: '#f8f8f8',
  color: '#9598a2',
  fontSize: '14px',
  fontWeight: '400',
  textAlign: 'center',
})
const cellStyle = () => ({
  color: '#444444',
  fontSize: '12px',
  fontWeight: '400',
  textAlign: 'center',
})
onMounted(() => {
  data.orderTableData = []
  data.orderTableData.push(props.orderInfo)
})

</script>

<style scoped>
.right-container {
  width: 1012px;
  padding-bottom: 30px
}
.order-title {
  padding-left: 50px;
  font-size: 22px;
  font-weight: 400;
  margin: 40px 0 20px 0;
}
.line-style {
  border-bottom: 2px solid #f2f2f2;
}
.order-info-title {
  padding: 15px 0 15px 50px;
  font-size: 14px;
  font-weight: 400
}
.course-type-content {
  display: flex;
  font-size: 14px;
  color: #04ADDB;
  padding: 0 9px;
  margin-bottom: 10px;
  border: 1px solid #04ADDB;
  border-radius: 24px
}
.course-name-content {
  font-size: 14px;
  color: #171920;
}
.price-label-container {
  line-height:32px;
  font-size: 16px;
  color: #9598a2;
  margin-right: 15px;
  text-align: right
}
.price-value-container {
  line-height:32px;
  font-size: 16px;
  color: #171920;
  text-align: left
}
</style>
